<template>
    <div class="detail_img">
        <img  v-for="l in detail_images" :src="l | imageFilter" @click="imageClick($event)"/>
        <!--<div class="mark"><span class="mark-text">1</span>&nbsp;/&nbsp;<span>{{detail_images.length}}</span></div>-->
    </div>
</template>

<script>
    export default{
        props:['detail_images'],
        data(){
            return {

            }
        },
        methods:{
            imageClick($event){
                console.log($event.taget)
            }
        },
        mounted(){
            var num=0
            var length=this.detail_images.length
            console.log(length)
            $('.detail_img img').eq(0).css('opacity','1')
            var _this=this
            clearInterval(timer)
            var timer=setInterval(function(){
                num++
                console.log(num)
                if(num==length){
                    num=0
                }
                $('.detail_img img').eq(num).animate({'opacity':'1'},2000).siblings().not('.mark').animate({'opacity':'0'},2000)
                $('.mark-text').html(num+1)
            },2000)

        },
    }
</script>
<style>
    .detail_img{
        width:100%;
        overflow: hidden;
        height:220px;
    }
    .detail_img img{
        width:100%;
        position: absolute;
        max-height: 220px;
        opacity: 0;
        /*z-index:1000;*/
    }
    .detail_img img.active{
        opacity: 1;
    }
    .mark{
        position: relative;
        top:180px;
        left:30px;
        color: #fff;
        font-size:16px;
    }
</style>